<template>
    <div>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>您当前所在位置</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>会员卡管理</el-breadcrumb-item>
        <el-breadcrumb-item>储值规则</el-breadcrumb-item>
        <el-breadcrumb-item v-if="valruleId">修改</el-breadcrumb-item>
        <el-breadcrumb-item v-else>新增</el-breadcrumb-item>

      </el-breadcrumb>
      <el-card>
         <el-form :model="valueForm" :rules="valueFormRules" ref="valueFormRef" label-width="130px">
          <div class="title">------储值规则-------</div>
          <el-form-item label="储值金额" prop="money">
            <el-input v-model="valueForm.money"></el-input>
          </el-form-item>
          <el-form-item label="赠送金额" >
            <el-input v-model="valueForm.send_money"></el-input>
          </el-form-item>
          <el-form-item label="适用门店" prop="use_shop_id">
            <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">店铺全选</el-checkbox>
            <!-- <div style="margin: 15px 0;"></div> -->
            <el-checkbox-group v-model="checkedshopId" @change="handleCheckedShopChange">
              <el-checkbox v-for="item in shopArr" :label="item.id" :key="item.id">{{item.title}}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="适用卡类型" prop="use_member_type_id">
            <el-checkbox :indeterminate="isIndeterminate1" v-model="cardCheckAll" @change="handleCardTypeChange">全选</el-checkbox>
            <el-checkbox-group v-model="checkedcardtypeId" @change="handleCardCheckedChange">
              <el-checkbox v-for="item in cardtypeArr" :label="item.id" :key="item.id">{{item.name}}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item class="btn">
            <el-button  @click="resetForm('valueFormRef')">重置</el-button>
            <el-button type="primary" @click="onSubmit('valueFormRef')" v-no-click>确定</el-button>
          </el-form-item>
         </el-form>
      </el-card>
    </div>
</template>

<script>
export default {
  data () {
    return {
      valruleId: '',
      valueForm: {
        money: 100,
        // eslint-disable-next-line camelcase
        send_money: 0,
        // eslint-disable-next-line camelcase
        use_shop_id: '',
        // eslint-disable-next-line camelcase
        use_member_type_id: ''

      },
      valueFormRules: {
        money: [
          { required: true, message: '储值金额不能为空', trigger: 'blur' }
        ],
        // eslint-disable-next-line camelcase
        use_shop_id: [
          { required: true, message: '请选择适用门店', trigger: 'blur' }
        ],
        // eslint-disable-next-line camelcase
        use_member_type_id: [
          { required: true, message: '请选择适用卡类型', trigger: 'blur' }
        ]
      },
      isIndeterminate: false,
      isIndeterminate1: false,
      checkAll: false,
      cardCheckAll: false,
      cardtypeArr: [],
      shopArr: [],
      checkedshopId: [],
      checkedcardtypeId: []
    }
  },
  created () {
    this.valruleId = sessionStorage.getItem('valruleId') || this.$route.params.valruleId

    if (this.valruleId) {
      this.getValRuleInfo()
    } else {
      this.getInfo()
    }
  },
  methods: {
    async getInfo () {
      const { data: res } = await this.$http.get('mapi/memberStoreRuleAdd')
      console.log(res)
      if (res.code !== 200) return this.$message.error('获取门店及卡类型失败！')
      this.$message.success('获取门店及卡类型成功！')

      this.shopArr = res.shop
      this.cardtypeArr = res.type
    },
    async getValRuleInfo () {
      const { data: res } = await this.$http.get('mapi/memberStoreRuleUpdate', { params: { id: this.valruleId } })
      console.log(res)
      if (res.code !== 200) return this.$message.error('获取储值规则信息失败！')
      this.$message.success('获取储值规则信息成功！')
      const valRule = res.list
      this.shopArr = res.shop
      this.cardtypeArr = res.type
      // 已选门店赋值
      if (valRule.use_shop_id !== '') {
        // eslint-disable-next-line camelcase
        valRule.use_shop_id = valRule.use_shop_id.split(',')
        const copyshop = valRule.use_shop_id.map(item => {
          return parseInt(item)
        })
        this.checkedshopId = copyshop
        if (this.checkedshopId.length === this.shopArr.length) {
          this.checkAll = true
        } else if (this.checkedshopId.length > 0) {
          this.isIndeterminate = true
        }
      }
      // 已选卡类型赋值
      if (valRule.use_member_type_id !== '') {
        // eslint-disable-next-line camelcase
        valRule.use_member_type_id = valRule.use_member_type_id.split(',')
        const copyType = valRule.use_member_type_id.map(item => {
          return parseInt(item)
        })
        this.checkedcardtypeId = copyType
        if (this.checkedcardtypeId.length === this.cardtypeArr.length) {
          this.cardCheckAll = true
        } else if (this.checkedcardtypeId.length > 0) {
          this.isIndeterminate1 = true
        }
      }
      this.valueForm = valRule
    },
    // 重置
    resetForm (formName) {
      this.$refs[formName].resetFields()
    },
    // 确定提交
    onSubmit (formName) {
      this.$refs[formName].validate(async valid => {
        if (valid) {
          // eslint-disable-next-line camelcase
          this.valueForm.rule_id = this.ruleId
          console.log(this.valueForm)
          if (this.valueForm.use_shop_id instanceof Array) {
            // eslint-disable-next-line camelcase
            this.valueForm.use_shop_id = this.valueForm.use_shop_id.join(',')
          }
          if (this.valueForm.use_member_type_id instanceof Array) {
            // eslint-disable-next-line camelcase
            this.valueForm.use_member_type_id = this.valueForm.use_member_type_id.join(',')
          }

          if (this.valruleId) {
            const { data: res } = await this.$http.post('mapi/memberStoreRuleUpdate', this.valueForm)
            if (res.code !== 200) return this.$message.error('修改失败, 请重新修改！')
            this.$message.success('修改成功')
            this.$router.push('storerule')
          } else {
            console.log(this.valueForm)
            const { data: res } = await this.$http.post('mapi/memberStoreRuleAdd', this.valueForm)
            console.log(res)
            if (res.code !== 200) return this.$message.error('添加储值规则失败！')
            this.$message.success('添加储值规则成功！')
            this.$router.push('storerule')
          }
        } else {
          this.$message.warning('请检查是否填写完善！！')
          return false
        }
      })
    },
    // 店铺全选
    handleCheckAllChange (val) {
      // eslint-disable-next-line camelcase
      this.valueForm.use_shop_id = ''
      this.checkedshopId = []
      if (this.checkAll) {
        this.shopArr.forEach(item => {
          this.checkedshopId.push(item.id)
        })
        // eslint-disable-next-line camelcase
        this.valueForm.use_shop_id = this.checkedshopId.join(',')
      } else {
        this.checkedshopId = []
      }
      this.isIndeterminate = false
    },
    // 卡类型全选
    handleCardTypeChange (val) {
      // eslint-disable-next-line camelcase
      this.valueForm.use_member_type_id = ''
      this.checkedcardtypeId = []
      if (this.cardCheckAll) {
        this.cardtypeArr.forEach(item => {
          this.checkedcardtypeId.push(item.id)
        })
      } else {
        this.checkedStore = []
      }
      // eslint-disable-next-line camelcase
      this.valueForm.use_member_type_id = this.checkedcardtypeId.join(',')
      this.isIndeterminate1 = false
    },
    // 店铺单选
    handleCheckedShopChange (value) {
      const checkedCount = value.length
      // eslint-disable-next-line camelcase
      this.valueForm.use_shop_id = value.join(',')
      this.checkAll = checkedCount === this.shopArr.length
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.shopArr.length
    },
    // 卡类型单选
    handleCardCheckedChange (value) {
      const checkedCount = value.length
      // eslint-disable-next-line camelcase
      this.valueForm.use_member_type_id = value.join(',')
      this.cardCheckAll = checkedCount === this.cardtypeArr.length
      this.isIndeterminate1 = checkedCount > 0 && checkedCount < this.cardtypeArr.length
    }
  },
  destroyed () {
    sessionStorage.removeItem('valruleId')
  }
}
</script>

<style scoped lang="less">
.title {font-size:18px;text-align: center;margin-bottom:20px;color:chocolate}
</style>
